<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GridTest</title>
</head>

<body>
    <div class="wrapper">
        <div class="content wrapper_content1">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
        </div>

        <div class="content wrapper_content2">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
        </div>

        <div class="content wrapper_content3">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
        </div>

        <div class="content wrapper_content4">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
        </div>

        <div class="content wrapper_content5">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
        </div>

        <div class="content wrapper_content6">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
        </div>

        <div class="content wrapper_content7">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
        </div>

        <div class="content wrapper_content8">
            <div class="box box1">
                <div class="nested">a</div>
                <div class="nested">b</div>
                <div class="nested">c</div>
            </div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
        </div>

        <div class="content wrapper_content9">
            <div class="box header">Header</div>
            <div class="box sidebar">Sidebar</div>
            <div class="box content">Content</div>
            <div class="box footer">Footer</div>
        </div>

        <div class="content wrapper_content10 media">
            <div class="image"></div>
            <div class="text">
                This is a media object example. We can use grid-template-areas to switch
                around the image and text part of the media object.
            </div>
        </div>

        <div class="content wrapper_content11">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
        </div>

        <div class="content wrapper_content12">
            <div class="box box1">1</div>
        </div>

        <div class="content wrapper_content13">
            <div class="box box1">I am placed from col-start line 1 to col-start 5</div>
            <div class="box box2">I am placed from col-start line 7 spanning 3 lines</div>
        </div>

        <div class="content wrapper_content14">
            <div class="box box1">I am placed from col1-start line 1 to col2-start line 2</div>
            <div class="box box2">I am placed from col1-start line 2 spanning 2 lines named col1-start</div>
        </div>

        <div class="content wrapper_content15">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
        </div>

        <div class="content wrapper_content16">
            <div class="box">One</div>
            <div class="box">Two</div>
            <div class="box">Three</div>
            <div class="box">Four</div>
            <div class="box">Five</div>
            <div class="box">Six</div>
            <div class="box">Seven</div>
            <div class="box">Eight</div>
            <div class="box">Nine</div>
            <div class="box">Ten</div>
            <div class="box">Eleven</div>
            <div class="box">Twelve</div>
        </div>

        <div class="content wrapper_content17">
            <div class="box">One</div>
            <div class="box">Two</div>
            <div class="box">Three</div>
            <div class="box">Four</div>
            <div class="box">Five</div>
            <div class="box">Six</div>
            <div class="box">Seven</div>
            <div class="box">Eight</div>
            <div class="box">Nine</div>
            <div class="box">Ten</div>
            <div class="box">Eleven</div>
            <div class="box">Twelve</div>
        </div>

        <div class="content wrapper_content18">
            <div class="box">One</div>
            <div class="box">Two</div>
            <div class="box">Three</div>
            <div class="box">Four</div>
            <div class="box">Five</div>
            <div class="box">Six</div>
            <div class="box">Seven</div>
            <div class="box">Eight</div>
            <div class="box">Nine</div>
            <div class="box">Ten</div>
            <div class="box">Eleven</div>
            <div class="box">Twelve</div>
        </div>

    </div>
</body>
<style>
    .wrapper {
        background: paleturquoise;
        padding: 12px;

        .content {
            display: grid;
            /* 栅格布局 */
            column-gap: 10px;
            row-gap: 1em;
            /* 等同于下面写法 */
            /* gap: 1emn 10px; */

            .box {
                border: 1px solid #000;
            }
        }

        .wrapper_content1 {
            background: pink;
            grid-template-columns: 200px 200px 200px;
            /* grid-template-rows:;
            grid: ; */
        }

        .wrapper_content2 {
            background: rgb(132, 191, 139);
            grid-template-columns: 1fr 1fr 1fr;
            /* 等同于下面简写 */
            /* grid-template-columns: repeat(3, 1fr); */
            grid-auto-rows: 200px;
        }

        .wrapper_content3 {
            background: rgb(134, 143, 79);
            grid-template-columns: 2fr 1fr 1fr;
            grid-auto-rows: minmax(100px, auto);
        }

        .wrapper_content4 {
            background: rgb(169, 137, 44);
            grid-template-columns: 500px 1fr 2fr;
        }

        .wrapper_content5 {
            grid-auto-rows: 50px;
            background: rgb(89, 168, 157);
            grid-template-columns: 20px repeat(6, 1fr) 20px;
        }

        .wrapper_content6 {
            grid-auto-rows: 50px;
            background: rgb(85, 59, 119);
            grid-template-columns: repeat(5, 1fr 2fr);
        }

        .wrapper_content7 {
            background: rgb(153, 88, 126);
            /* 3行3列 */
            grid-template-columns: repeat(3, 1fr);
            /* grid-template-rows: repeat(3, 100px); */
            grid-auto-rows: 100px;

            .box1 {
                grid-column-start: 1;
                grid-column-end: 4;
                grid-row-start: 1;
                grid-row-end: 3;
                /* 等同于下面简写 */
                /* grid-column: 1 / 4;
                grid-row: 1 / 3; */
                /* 等同于整体简写 */
                /* grid-area:grid-row-start/grid-column-end/grid-row-end/grid-column-start; */
                /* grid-area: 1 / 1 / 3 / 4; */
            }

            .box2 {
                grid-column-start: 1;
                grid-row-start: 3;
                grid-row-end: 5;
                /* 等同于下面简写 */
                /* grid-column: 1;
                grid-row: 3 / 5; */
            }
        }

        .wrapper_content8 {
            grid-auto-rows: 50px;
            background: #fff4e6;
            grid-template-columns: repeat(3, 1fr);
            gap: 3px;

            .box1 {
                display: grid;
                /* 嵌套网格布局 */
                grid-template-columns: repeat(3, 1fr);
                /* 相当于继承 */
                /* grid-template-columns: subgrid; */

                grid-column-start: 1;
                grid-column-end: 4;
                grid-row-start: 1;
                grid-row-end: 3;
                /* 等同于下面简写 */
                /* grid-column: 1 / 4;
                grid-row: 1 / 3; */
            }

            .nested {
                border: 2px solid #ffec99;
                border-radius: 5px;
                background-color: #fff9db;
                padding: 1em;
            }
        }

        /* 网格命名 */
        .wrapper_content9 {
            background: #721d24;
            display: grid;
            /* grid-template-columns: repeat(9, 1fr);
            grid-auto-rows: minmax(100px, auto); */
            /* grid-template-areas:
                "hd hd hd hd   hd   hd   hd   hd   hd"
                "sd sd sd main main main main main main"
                "ft ft ft ft   ft   ft   ft   ft   ft"; */
            /* grid-template-areas:
                "hd hd hd hd   hd   hd   hd   hd   hd"
                "sd sd sd main main main main main main"
                ". . . ft   ft   ft   ft   ft   ft"; */
            /* grid-template-areas:
                "hd hd hd hd   hd   hd   hd   hd   hd"
                "sd sd sd main main main main main main"
                "sd sd sd ft   ft   ft   ft   ft   ft"; */

            /*  grid-auto-rows、grid-template-columns、grid-template-areas */
            grid-template:
                "hd hd hd hd   hd   hd   hd   hd   hd"
                minmax(100px, auto) "sd sd sd main main main main main main"
                minmax(100px, auto) "sd sd sd ft   ft   ft   ft   ft   ft"
                minmax(100px, auto) / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            /* 等同于 */
            grid:
                "hd hd hd hd   hd   hd   hd   hd   hd"
                minmax(100px, auto) "sd sd sd main main main main main main"
                minmax(100px, auto) "ft ft ft ft   ft   ft   ft   ft   ft"
                minmax(100px, auto) / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;


            .header {
                grid-area: hd;
            }

            .footer {
                grid-area: ft;
            }

            .content {
                grid-area: main;
            }

            .sidebar {
                grid-area: sd;
            }

        }

        .wrapper_content10 {
            border: 2px solid #f76707;
            border-radius: 5px;
            background-color: #fff4e6;
            max-width: 400px;
            /* 布局 */
            display: grid;
            /* grid-template-columns: 1fr 3fr;
            grid-template-areas: "img content"; */
            grid-template-columns: 3fr 1fr;
            grid-template-areas: "content img";

            margin-bottom: 1em;

            .image {
                grid-area: img;
                background-color: #ffd8a8;
            }

            .text {
                grid-area: content;
                padding: 10px;
            }
        }

        /* 命名线布局 */
        .wrapper_content11 {
            display: grid;
            grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
            grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
            background: #7b4e14;

            .box1 {
                grid-column-start: main-start;
                grid-row-start: main-start;
                grid-row-end: main-end;
            }

            .box2 {
                grid-column-start: content-end;
                grid-row-start: main-start;
                grid-row-end: content-end;
            }

            .box3 {
                grid-column-start: content-start;
                grid-row-start: main-start;
            }

            .box4 {
                grid-column-start: content-start;
                grid-column-end: main-end;
                grid-row-start: content-end;
            }

        }

        .wrapper_content12 {
            background: #ffec99;
            display: grid;
            grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
            grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];

            .box1 {
                grid-area: content;
            }
        }

        .wrapper_content13 {
            background: #f76707;
            display: grid;
            grid-template-columns: repeat(12, [col-start] 1fr);

            .box1 {
                grid-column: col-start / col-start 5;
            }

            .box2 {
                grid-column: col-start 7 / span 3;
            }

        }

        .wrapper_content14 {
            background: #2776b3;
            display: grid;
            grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);

            .box1 {
                grid-column: col1-start / col2-start 2;
            }

            .box2 {
                grid-row: 2;
                grid-column: col1-start 2 / span 2 col1-start;
            }
        }

        .wrapper_content15 {
            background: #ffec99;
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(12, [col-start] 1fr);

            .box1,
            .box5 {
                grid-column: col-start / span 12;
            }

            .box2 {
                grid-column: col-start / span 3;
                grid-row: 2;
            }

            .box3 {
                grid-column: col-start 4 / span 6;
                grid-row: 2;
            }

            .box4 {
                grid-column: col-start 10 / span 3;
                grid-row: 2;
            }
        }

        .wrapper_content16 {
            background: #f76707;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 100px;
            gap: 10px;

            div:nth-child(2) {
                grid-column: 3;
                grid-row: 2 / 4;
            }

            div:nth-child(5) {
                grid-column: 1 / 3;
                grid-row: 1 / 3;
            }
        }

        /* 与上边区别：定义了第一个元素的位置，剩下未定义的元素位置只能在已定义的元素后面(右，下)排列 */
        .wrapper_content17 {
            background: #7c6d64;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 100px;
            gap: 10px;

            div:nth-child(4n + 1) {
                grid-column-end: span 2;
                grid-row-end: span 2;
                background-color: #ffa94d;
            }

            div:nth-child(2) {
                grid-column: 3;
                grid-row: 2 / 4;
            }

            div:nth-child(5) {
                grid-column: 1 / 3;
                grid-row: 1 / 3;
            }
        }

        /* 自动填充缺口 */
        .wrapper_content18 {
            background: #8b5c89;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 100px;
            gap: 10px;
            grid-auto-flow: dense;

            div:nth-child(4n + 1) {
                grid-column-end: span 2;
                grid-row-end: span 2;
                background-color: #ffa94d;
            }

            div:nth-child(2) {
                grid-column: 3;
                grid-row: 2 / 4;
            }

            div:nth-child(5) {
                grid-column: 1 / 3;
                grid-row: 1 / 3;
            }
        }
    }
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1.min.js"></script>
<script>

</script>

</html>